<template>
  <!-- 注册表单 -->
  <view class="register-form uni-pa-10">
    <uni-forms ref="registerFormRef" :modelValue="state.registerForm">
        <uni-forms-item label="手机号">
          <uni-easyinput v-model="state.registerForm.phone"></uni-easyinput>
        </uni-forms-item>
      <uni-forms-item label="账号名">
        <uni-easyinput v-model="state.registerForm.account"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="密码">
        <uni-easyinput v-model="state.registerForm.passwd" type="password"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="确认密码">
        <uni-easyinput v-model="state.registerForm.repasswd" type="password"></uni-easyinput>
      </uni-forms-item>
      <CaptchaComp :phone="state.registerForm.phone" @get-captcha="receiveCaptcha" />
    </uni-forms>
    <button class="btn-in-login" type="warn" size="mini" @tap="doRegister">注册</button>
    <view class="register-txt uni-mt-5">
      <navigator url="/pagesLogin/settings/login">已有账号？去登录</navigator>
    </view>
  </view>
</template>
<script setup lang="ts">
import {ref} from "vue";
import CaptchaComp from './components/captcha.vue'
import type {RegisterType} from "@/types/user";
import {registerUser} from "@/services/login";

const state = ref({
  registerForm: {
    phone: "18996967713",
    account: "weridwoman",
    passwd: "666666",
    repasswd: "66666",
    code: ""
  } as RegisterType,
  formConf: {
    disableReqCaptcha: false,
    captchaTxt: "获取验证码",
    reqTime: 0,
    intervalId: 0
  }
})

const receiveCaptcha = (captcha: string) => {
  console.log("receive captcha component data: ", captcha)
  state.value.registerForm.code = captcha
}

const doRegister = () => {
  registerUser(state.value.registerForm).then((r) => {
    uni.showToast({
      title: "注册成功，请登录",
      icon: "none"
    })
    uni.navigateTo({
      url: "/pagesLogin/settings/login"
    })
  }).catch((e) => {
    uni.showToast({
      title: e.msg,
      icon: "none"
    })
  })
}
</script>
<style scoped lang="scss">
.register-form {
  display: flex;
  flex-direction: column;
  justify-content: center;

}
.btn-in-login {
  width: 100%;
}
.register-txt {
  color: #909399;
  font-size: 12px;
}
.disable-item {
  background-color: #8f939c;
  color: #fff;
}
</style>